<template>
  <div v-if="error" class="error-boundary p-4 bg-red-50 border border-red-300 rounded-md">
    <h2 class="text-red-700 text-lg font-semibold mb-2">出错了</h2>
    <p class="text-red-600">{{ error }}</p>
    <button
      class="mt-2 px-4 py-2 bg-red-600 text-white rounded hover:bg-red-700"
      @click="handleReset"
    >
      重试
    </button>
  </div>
  <slot v-else></slot>
</template>

<script setup>
import { ref, onErrorCaptured } from 'vue'

const error = ref(null)

onErrorCaptured((err) => {
  error.value = err.message
  return false
})

const handleReset = () => {
  error.value = null
}
</script> 